<template>
    <div class="pageWarp">
        <div class="dap_warp" :style="{ transform: `scale(${scaleRatio})` }">
            <div class="dap_header">
                <div class="header_left">{{ dayweather }} {{ daytemp }}℃</div>
                <div class="header_centeer">贞一环境智慧运管中心</div>
                <div class="header_right">
                    <div>
                        <span>{{ timeYear }}</span>
                        <span class="text">年</span>
                        <span>{{ timeMonth }}</span>
                        <span class="text">月</span>
                        <span>{{ timeDay }}</span>
                        <span class="text">日</span>
                        <span class="pading">星期</span>
                        <span class="text">{{ currentWeek }}</span>
                        <span class="pading" style="display: inline-block;width: 100px;">{{ times }}</span>
                    </div>
                    <div @click="mapBlck" class="img">
                        <img style="width: 100%;" src="../imgModel/mapback.png" alt="">
                    </div>
                </div>
            </div>
            <div class="dap_biaoti">
                <div class="biaotiLeft"></div>
                <div class="biaoticenter"></div>
                <div class="biaotiLeft">
                    <img @click="biaotiLeftImg" style="width: 100px;cursor: pointer;" src="../imgModel/homeshuju.png"
                        alt="">
                </div>
            </div>
            <div class="dap_bottom">
                <div class="dap_left">
                    <div class="video">
                        <div class="videoText">
                            <div> 视频监控{{ videoList.length }}</div>
                            <div>
                                <!-- <img @click="changeCount(1)" style="width: 60px;margin-right: 10px;"
                                    src="../imgUrl/single-row.png" alt="">
                                <img @click="changeCount(2)" style="width: 60px;margin-right: 10px;"
                                    src="../imgUrl/biserial.png" alt="">
                                <img @click="changeCount(3)" style="width: 60px;margin-right: 10px;"
                                    src="../imgUrl/threeColumns.png" alt=""> -->
                            </div>

                        </div>
                        <div class="draggableWarp" v-if="true">
                            <draggable class="list-group" group="people" itemKey="channel_sip_id">
                                <div v-for="(item, index) of videoList" :key="index" :style="{ width: widthData }"
                                    class="draggableList">
                                    <div class="draggableListP">
                                        <img @click="sendDevicePush(item, index)" v-if="!videoUrl[index]"
                                            style="width: 100%;height: 100%;" src="../imgModel/videoPlay.png" alt="">
                                        <device-live-stream :height="heightData" v-else ref="deviceLiveStream"
                                            :device="videoUrlForm[index]" />
                                    </div>
                                </div>
                            </draggable>
                        </div>
                        <div class="videoList" v-if="false">
                            <div v-if="videoList.length > 0" style="padding:10px;">
                                <div :key="index" v-for="(item, index) of videoList">
                                    <div @click="sendDevicePush(item, index)" v-if="!videoUrl[index]"
                                        style="color: #ffffff;margin-top: 10px; font-size: 30px; font-weight: bold;width: 100%;height: 310px;background-color: black;display: flex;align-items: center;justify-content: center;">
                                        <!-- {{ index + 1 }} -->
                                        <img style="width: 100%;height: 100%;" src="../imgModel/videoPlay.png" alt="">
                                    </div>
                                    <!-- <player ref="player" v-else :videoUrl="videoUrl[index]" fluent autoplay
                                        @screenshot="shot" @destroy="destroy" class="player-wrap" /> -->
                                    <device-live-stream v-else ref="deviceLiveStream" :device="videoUrlForm[index]" />
                                </div>
                                <!-- <player style="margin-top: 5px;width: 100%;" :key="index"
                                    v-for="(item, index) of videoList" :ref="'player' + index"
                                    :videoUrl="item.playVideo.playurl" :height="200" fluent autoplay
                                    class="player-wrap" /> -->
                            </div>
                            <div v-else style="width: 100%;height: 500px;padding:10px;">
                                <img style="width: 100%;" src="../imgModel/videoMap.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="dap_right">
                    <iframe class="iframeStyle" :src="iframeSrc" frameborder="0"></iframe>
                </div>
            </div>
        </div>
        <div class="dap_food"></div>
    </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
import { listCenter } from '@/api/scada/center';
import VidoePaly from './vidoePaly.vue'
import { sipVideoList } from '@/api/home/home.js';
import player from '@/views/components/player/jessibuca.vue';
import { startPlay } from '@/api/iot/channel';
import deviceLiveStream from '@/views/components/player/newdeviveLive.vue';
export default {
    components: {
        VidoePaly,
        player,
        deviceLiveStream
    },
    data() {
        return {
            date: new Date(),
            timer: null,
            scaleRatio: 1,
            dayweather: '',
            daytemp: '',
            timeYear: '',
            timeMonth: '',
            timeDay: '',
            currentWeek: '',
            times: '',
            iframeSrc: '',
            vidoeData: [],
            groupId: '',
            videoList: [],
            videoUrl: [''],
            isObject: '{}',
            videoUrlForm: [],
            widthData: '100%',
            heightData: '300px',
            isCount: 1,
        }
    },
    mounted() {
        let _this = this// 声明一个变量指向Vue实例this，保证作用域一致
        this.timer = setInterval(() => {
            _this.date = new Date(); // 修改数据date
        }, 1000)
        // this.getCurrentPosition()
        this.updateScreenWidth(); // 初始化宽度
        window.addEventListener('resize', this.updateScreenWidth); // 监听窗口大小变化

    },
    created() {
        this.mapFun();
        this.dateFormat();
        this.listCenterFun();
        this.sipVideoListFun();
    },
    methods: {
        sipVideoListFun() {
            this.groupId = localStorage.getItem('isDataId');
            console.log(this.groupId, 'groupIdgroupIdgroupIdgroupId')
            sipVideoList({ groupId: this.groupId }).then((res) => {
                if (res.code === 200) {
                    this.videoList = res.rows

                    for (let item of res.rows) {
                        this.videoUrlForm.push({
                            channelId: item.channel_sip_id,
                            deviceId: item.device_id,
                            serialNumber: item.device_sip_id
                        })
                    }
                }
            })
        },
        dateFormat() {
            const updateTime = () => {
                var date = new Date();
                var year = date.getFullYear();
                var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
                const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
                var currentWeek = weekDays[date.getDay()];
                this.timeYear = year;
                this.timeMonth = month;
                this.timeDay = day;
                this.currentWeek = currentWeek;
                this.times = hours + ':' + minutes + ':' + seconds;
            };

            // 初始化时间
            updateTime();

            // 每秒更新一次时间
            setInterval(updateTime, 1000);
            // 拼接
            // return year + "年" + month + "月" + day + "日" + " " + currentWeek + " " + hours + ":" + minutes;
        },
        mapFun() {
            window._AMapSecurityConfig = {
                securityJsCode: "249fc67c47f2650bfeec222499e82c16",
            };
            AMapLoader.reset()
            const _this = this
            AMapLoader.load({
                key: '37ab382ecdb27440a23c0a28853e8c86', // 申请好的Web端开发者Key，首次调用 load 时必填
                version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: []  // 需要使用的的插件列表，如比例尺'AMap.Scale'等，如果是地图控件，必须再 map.addControl添加
            })
                .then((AMap) => {
                    AMap.plugin('AMap.Weather', function () {
                        //创建天气查询实例
                        var weather = new AMap.Weather();
                        //执行实时天气信息查询
                        weather.getLive('信阳市', function (err, data) {
                            _this.dayweather = data.weather + ' ' + "风向" + data.windDirection + ' ' + "风力" + data.windPower + "级" + ' '
                            _this.daytemp = data.temperature
                        });
                    });
                })
                .catch((e) => {
                    console.log(e)
                })
        },
        mapBlck() {
            console.log('success222222222222222')
            this.$emit('success2', {
                type: 1
            })
        },
        biaotiLeftImg() {
            this.$emit('success2', {
                type: 3,
            })
        },
        // 查询组态中心列表
        listCenterFun() {
            this.groupId = localStorage.getItem('isDataId');
            let params = {
                pageSize: 999,
                pageNum: 1,
                groupId: this.groupId
            }
            listCenter(params).then((response) => {
                if (response.code === 200) {
                    this.centerList = response.rows;
                    this.arrowDownitem(this.centerList[0])
                }
            });
        },
        arrowDownitem(item) {
            this.isObject = item.scadaData
            if (process.env.NODE_ENV == "development") {
                this.iframeSrc = `http://localhost/topo/fullscreen?id=${item.id}&guid=${item.guid}`
            } else {
                console.log(window.location.hostname)
                this.iframeSrc = `${window.location.origin}/topo/fullscreen?id=${item.id}&guid=${item.guid}`
            }

        },
        save(item) {
            let dataStr = window.localStorage.getItem('playData') || '[]';
            let data = JSON.parse(dataStr);
            data[this.playerIdx] = item;
            window.localStorage.setItem('playData', JSON.stringify(data));
        },
        setPlayUrl(url, idx) {
            this.$set(this.videoUrl, idx, url);
            let _this = this;
            setTimeout(() => {
                window.localStorage.setItem('videoUrl', JSON.stringify(_this.videoUrl));
            }, 100);
            console.log(this.videoUrl, '1231')
        },
        //通知设备上传媒体流
        sendDevicePush(itemData, index) {
            this.heightData = '';
            setTimeout(() => {
                this.isCountFun()
            }, 300)
            this.save(itemData);
            let deviceId = itemData.device_sip_id;
            let channelId = itemData.channel_sip_id;
            console.log('通知设备推流1：' + deviceId + ' : ' + channelId);
            let idxTmp = index;
            let that = this;
            this.loading = true;
            startPlay(deviceId, channelId)
                .then((response) => {
                    console.log('开始播放：' + this.deviceId + ' : ' + this.channelId);
                    console.log('流媒体信息：' + response.data);
                    let res = response.data;
                    console.log('playurl：' + res.playurl);
                    itemData.playUrl = res.playurl;
                    itemData.streamId = res.streamId;
                    that.setPlayUrl(itemData.playUrl, idxTmp);
                })
                .finally(() => {
                    that.loading = false;
                });
        },
        changeCount(count) {
            this.isCount = count;
            this.widthData = `calc(100% / ${count})`;
            this.heightData = '';
            setTimeout(() => {
                this.isCountFun()
            }, 300)
        },
        isCountFun() {
            if (this.isCount == 1) {
                this.heightData = '300px';
            }
            if (this.isCount == 2) {
                this.heightData = '200px';
            }
            if (this.isCount == 3) {
                this.heightData = '150px';
            }
        },
        updateScreenWidth() {
            this.screenWidth = window.innerWidth;
            this.scaleRatio = this.screenWidth / 2560
        },
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.updateScreenWidth); // 移除监听器
        if (this.timer) {
            clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
        }
    }
}
</script>

<style lang="scss" scoped>
body,
html {
    margin: 0;
    padding: 0;
}

.pageWarp {
    width: 100vw;
    height: 100vh;
    background-image: url(../imgModel/dapBj.png);
    background-size: 100% 100%;
}

.dap_food {
    width: 100vw;
    height: 50px;
    background-image: url(../imgModel/imgfood.png);
    background-size: 100% 100%;
    position: fixed;
    bottom: 0;
}

.dap_warp {
    width: 2560px;
    height: 1080px;
    transform-origin: 0% 0%;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    .dap_header {
        width: 100%;
        background-image: url(../imgModel/imgHeader.png);
        background-size: 100% 100%;
        height: 110px;
        display: flex;

        .header_left {
            width: 500px;
            font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
            font-weight: bold;
            font-size: 22px;
            color: #FFFFFF;
            text-align: left;
            line-height: 70px;
            padding-left: 30px;
        }

        .header_centeer {
            flex: 1;
            font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
            font-weight: 400;
            font-size: 50px;
            color: #FFFFFF;
            text-align: center;
            line-height: 90px;
        }

        .header_right {
            width: 500px;
            font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
            font-weight: 400;
            font-size: 22px;
            color: #779DFF;
            text-align: right;
            line-height: 70px;
            display: flex;
            justify-content: flex-end;

            .text {
                color: #FFFFFF;
                font-weight: 400;
            }

            .pading {
                // width: 100px;
                padding-left: 20px;
            }

            .img {
                width: 38px;
                margin: 10px 20px;
            }

        }
    }

    .dap_bottom {
        display: flex;

        .dap_left {
            width: 650px;
            height: 830px;
            padding: 0 20px;


            .video {
                background-image: url(../imgUrl/mapvideobiank.png);
                background-size: 100% 100%;
                padding-bottom: 20px;

                .videoText {
                    width: 100%;
                    font-family: Source Han Sans CN, Source Han Sans CN;
                    font-weight: 400;
                    font-size: 20px;
                    color: #FFFFFF;
                    padding: 7px 20px;
                    display: flex;
                    justify-content: space-between;
                }

                .videoList {
                    width: 100%;
                    height: 950px;
                    overflow-y: scroll;

                    &::-webkit-scrollbar {
                        display: none;
                        /* 对于Chrome, Safari和Opera */
                    }
                }


            }
        }

        .dap_right {
            flex: 1;
            height: 830px;
            padding: 0 20px;

        }
    }

}

::v-deep .iframeStyle {
    width: 100%;
    height: 100%;
    overflow: auto;
    /* 这确保内容如果超出容器会滚动 */
    scrollbar-width: none;
    /* 对于Firefox */

    &::-webkit-scrollbar {
        display: none;
        /* 对于Chrome, Safari和Opera */
    }

}



::-webkit-scrollbar {
    /*隐藏滚轮*/
    display: none;
}

.dap_biaoti {
    display: flex;
    color: #FFFFFF;
    padding: 0;
    margin-top: -10px;

    .biaotiLeft {
        width: 25vw;
        text-align: right;
        margin-top: -20px;
        padding-right: 20px;
    }

    .biaoticenter {
        flex: 1;
        text-align: center;
        font-size: 30px;
    }
}

.draggableWarp {
    // width: 500px;
    width: 100%;
    height: 950px;
    overflow-y: scroll;

    &::-webkit-scrollbar {
        display: none;
        /* 对于Chrome, Safari和Opera */
    }
}

.draggableList {
    cursor: pointer;
    display: inline-block;
    padding: 5px;
}
</style>
